<template>
	<view class="big-box">
		<view class="list-box">
			<view class="image">
				<image
					class="img"
					referrer="no-referrer|origin|unsafe-url"
					:src="porps.item.cover"
					mode="aspectFill"
				></image>
			</view>
			<view class="text">
				<view class="text-title">{{ porps.item.trainName }}</view>
				<view class="text-card color1" v-if="porps.item.statusStr == '审核通过'">
					{{ porps.item.statusStr }}
				</view>
				<view class="text-card color2" v-if="porps.item.statusStr == '待审核'">
					{{
						porps.item.status == '0' && porps.item.payStatus == '0'
							? porps.item.payStatusStr
							: porps.item.statusStr
					}}
				</view>
				<view class="text-card color3" v-if="porps.item.statusStr == '报名失败'">
					{{ porps.item.statusStr }}
				</view>
				<view class="text-card color3" v-if="porps.item.statusStr == '审核拒绝'">
					{{ porps.item.statusStr }}
				</view>
				<view class="text-card color4" v-if="porps.item.statusStr == '待支付'">{{ porps.item.statusStr }}</view>
				<view class="text-card color4" v-if="porps.item.statusStr == '待提交'">{{ porps.item.statusStr }}</view>
				<view class="text-card color5" v-if="porps.item.statusStr == '已取消'">{{ porps.item.statusStr }}</view>
			</view>
		</view>
		<view class="hr"></view>
	</view>
</template>

<script setup>
const porps = defineProps({
	pic: {
		type: String
	},
	title: {
		type: String
	},
	card: {
		type: String
	},
	timer: {
		type: String
	},
	item: {}
});
</script>

<style lang="scss">
.big-box {
	width: 100%;
	padding: 25rpx 0;

	.hr {
		width: 100%;
		border-bottom: 1rpx solid #e5e5e5;
		padding-top: 25rpx;
	}

	.list-box {
		width: 100%;
		height: 180rpx;
		display: flex;

		.image {
			width: 270rpx;
			height: 180rpx;
			padding-right: 25rpx;

			.img {
				width: 270rpx;
				height: 180rpx;
				border-radius: 15rpx;
			}
		}

		.text {
			margin-left: 20rpx;

			.text-title {
				text-align: left;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.text-card {
				font-size: 20rpx;
				width: 94rpx;
				height: 32rpx;
				margin-top: 57rpx;
				text-align: center;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				border-radius: 16px 16px 16px 0px;
			}

			.color1 {
				background: linear-gradient(270deg, #54e1b9, #00caa6);
			}

			.color2 {
				background: linear-gradient(270deg, #be8efb, #a76df4);
			}

			.color3 {
				background: linear-gradient(90deg, #f83841, #f76d74);
			}

			.color4 {
				background: linear-gradient(90deg, #fea449, #ffb95f);
			}

			.color5 {
				background: linear-gradient(270deg, #d9d9d9, #bcbcbc);
			}
		}
	}
}
</style>
